import React, { Component } from 'react'
import { connect } from 'react-redux'
// import { bindActionCreators } from 'redux'
import { Link } from 'react-router'
import { Menu, Icon } from 'antd';
import _ from 'lodash';
import { findUrl } from 'lib/fun'
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;
// import { selectMenu, expandMenu } from '../actions/sideBar'

class SideBar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      // openKeys: this.props.sideBar.openKey
    }
    // console.log(this.props.routing);
  }

  // location.pathname.split('/').slice(1,100)
  componentDidMount(){

  }

  componentWillReceiveProps(nextProps){
    
  }

  onOpenChange = (openKeys)=>{
    const latestOpenKey = openKeys.find(key => !(this.state.openKeys.indexOf(key) > -1));
    this.setState({ openKeys: [latestOpenKey]||[] });
  }

  render() {
    let { user } = this.props.common;
    const { location, sideBarShow } = this.props;
    let menus = user&&user.menu||[]
    var url = location.pathname;
    var find = ""
    var selectedKeys = [];
    // if(url == '/'){
    //   menus = [{
    //     url: '/',
    //     name: '门户首页',
    //     id: 'index'
    //   }]
    // }else{

    find = findUrl(menus, /news\/show/.test(url)?'/system/news/list':url);
    if(find){
      menus = find.menu.children;
      selectedKeys = /news\/show/.test(url)?[]:[find.id+""];
    }
    // }
    
    return (
      <Menu
        style={{ width: 170 }}
        mode={sideBarShow?"inline":"vertical"}
        // openKeys={this.state.openKeys}
        // onOpenChange={this.onOpenChange}
        // openKeys={ defaultOpenKeys }
        defaultOpenKeys={ [find.parent+""] }
        selectedKeys={ selectedKeys }
      >
        {
          _.map(menus, (lv1) => {
            if (lv1.url) {
              return (<Menu.Item key={lv1.id}>
                          <Link to={lv1.url}>
                            <span><Icon type={lv1.icon||'home'} /><span>{ sideBarShow?lv1.name:"" }</span></span>
                          </Link>
                      </Menu.Item>)
            }else{
              return(<SubMenu key={lv1.id} title={<span><Icon type={lv1.icon} />{ sideBarShow?lv1.name:"" }</span>}>
                {
                  _.map(lv1.children, (lv2) => {
                    if (lv2.url) {
                      return (<Menu.Item key={ lv2.id }>
                                <Link to={lv2.url}>{ lv2.name }</Link>
                              </Menu.Item>)
                    }else{
                      return (<MenuItemGroup  key={ lv2.id } title={ lv2.name }>
                        {
                          _.map(lv2.children, (lv3) => {
                            return (<Menu.Item key={ lv3.id }>
                                      <Link to={lv3.url}>{ lv3.name }</Link>
                                    </Menu.Item>)
                          })
                        }
                      </MenuItemGroup>)
                    }
                  })
                }
              </SubMenu>)
            }
          })
        }

        {/*
        {
        _.map(menus, (lv1, id1) => {
          if (!lv1.submenu) {
            return (<Menu.Item key={id1}>
                        <Link to={lv1.link}>
                          <span><i className="x-icon x-icon-gift" style={{color: lv1.color}}></i><span>{ lv1.display }</span></span>
                        </Link>
                    </Menu.Item>)
          }else{
            return(<SubMenu key={id1} title={<span>{ lv1.display }</span>}>
              {
                _.map(lv1.submenu, (lv2, id2) => {
                  if (!lv2.submenu) {
                    return (<Menu.Item key={ id2 }>
                              <Link to={lv2.link}><i className="x-icon x-icon-gift" style={{color: lv2.color}}></i>{ lv2.display }</Link>
                            </Menu.Item>)
                  }else{
                    return (<MenuItemGroup  key={id2} title={ lv2.display }>
                      {
                        _.map(lv2.submenu, (lv3, id3) => {
                          return (<Menu.Item key={ id3 }>
                                    <Link to={lv3.link}><i className="x-icon x-icon-gift" style={{color: lv3.color}}></i>{ lv3.display }</Link>
                                  </Menu.Item>)
                        })
                      }
                    </MenuItemGroup>)
                  }
                })
              }
            </SubMenu>)
          }
        })
        }
        */}
      </Menu>
    )
  }
}

function mapStateToProps(state) {
  return {
    common: state.common,
    sideBarShow: state.sideBar.show,
  }
}

// function mapDispatchToProps(dispatch) {
//   return bindActionCreators({ selectMenu, expandMenu }, dispatch)
// }

export default connect(mapStateToProps)(SideBar)

